<template>
  <div>
    <div style="text-align: center;margin: 5px">
      <div class="block">
        <el-avatar :size="100" :src="icon"></el-avatar>
      </div>
      <p>{{ name  }}</p>

    </div>
    <van-tabs v-model="active1">
      <van-tab title="我的VIP ">
        <div v-show="is_vip">
          <div v-show="msg.day>0">
            <p>尊敬的VIP会员: 您是本站第{{ vip_id }}个会员</p>
            <p>提示:</p>
            <p>你的会员剩余时间为：
              <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒"/>
            </p>
          </div>
          <div v-show="msg.day<0">
            <p>您的会员已过期，请前往续费！</p>
          </div>
        </div>

        <div v-show="is_vip==false">
          <p>您目前还不是本站的VIP成员</p>
        </div>
        <br>

        <div>
          <p> vip功能介绍：特殊标识，</p>

        </div>
        <div style="text-align: center">
        <span v-show="is_vip">你有权观看以下特权的视频</span>
        <span v-show="is_vip==false">你无权观看以下特权的视频</span>

</div>
      </van-tab>
<!--      -->
      <van-tab title="购买/续费">
          <p>购买以下vip，你将享有本站的特权待遇。</p>
        <van-panel title="高级会员" desc="请选择以下购买" >
  <van-radio-group v-model="radio">
  <van-cell-group>
    <van-cell title="会员VIP/30天" clickable @click="radio = '1'">
      <template #right-icon>
        <van-radio name="1" />
      </template>
    </van-cell>
    <van-cell title="会员VIP/60天" clickable @click="radio = '2'">
      <template #right-icon>
        <van-radio name="2" />
      </template>
    </van-cell>
     <van-cell title="会员VIP/90天" clickable @click="radio = '3'">
      <template #right-icon>
        <van-radio name="3" />
      </template>
    </van-cell>
  </van-cell-group>
</van-radio-group>
  <template #footer style="border: 1px saddlebrown solid">
    <div style="text-align: right">
    <span style="">合计：{{price}}元</span>&nbsp;&nbsp;
    <van-button size="small" type="danger" @click="onSubmit">购买</van-button></div>
  </template>
</van-panel>


      </van-tab>


    </van-tabs>


    <div>
      <van-tabbar v-model="active" style="height: 50px;opacity: 0.9;">
        <van-tabbar-item icon="home-o" @click="goHome">首页</van-tabbar-item>
        <van-tabbar-item icon="refund-o">VIP</van-tabbar-item>
        <van-tabbar-item icon="user-circle-o" @click="goPersonal">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import {Dialog, Toast} from 'vant';
export default {
  name: "Classification",
  data() {
    return {
      active: 1,
      active1: 0,
      time: '30 * 60 * 60 * 1000',
      t: "",
      msg: {},
      is_vip: true,
      vip_id:'',
      radio:'',
      price:0,
      name:'',
      icon:''
    }
  },
  methods: {
    goPersonal() {
      this.$router.push('/personal')
    },
    goHome() {
      this.$router.push('/')
    },
    async gettime() {
      await this.$axios.get(`${this.$settings.base_url}user/vip/?user=${localStorage.getItem('id')}`).then(res => {
        if (res.data.length > 0) {
          this.msg = res.data[0].odd_time
          this.vip_id=res.data[0].id
        } else {
          this.is_vip = false
        }
        this.time = (res.data[0].odd_time.day * 86400 + res.data[0].odd_time.huor * 3600 + res.data[0].odd_time.min * 60 + res.data[0].odd_time.second) * 1000
      })
    },
    onSubmit(){
      // let token = this.$cookies.get('token')
      let token=localStorage.getItem('token')
      console.log(token)
      if(token){
         this.$axios({
           url:`${this.$settings.base_url}order/pay/`,
            method: 'post',
           headers: {
            'Authorization': 'jwt ' + token
          },
           data:{
      viptypes:[this.radio],
      total_amount:this.price,
      pay_type:1,
      subject:`高级会员VIP${this.radio*30}天`,
      user_id:sessionStorage.getItem('id')
    },
         }).then(res => {
           console.log(res.data)
          if (res.data.code === 100) {
            console.log(res.data.pay_url)
            let pay_url = res.data.pay_url
            open(pay_url, '_self') //在当前页面打开地址

          }
        })
      }else {
        Toast('请先登录')
      }


    },

  },
  created() {
    this.gettime()
    this.name=localStorage.getItem('username')
    this.icon=localStorage.getItem('icon')


  },
  watch:{
    radio(val){
      if(val==1){
        this.price=20
      }else if(val==2){
        this.price=40
      }else {
        this.price=55
      }
    }
  },
  mounted() {

  }
}
</script>

<style scoped>

</style>